<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Display</title>
</head>

<body>
	<div id="container"></div>
	<script src="./konva.min.js"></script>
	<script>
		const ws = new WebSocket('ws://192.168.1.3:8080');

		// first we need to create a stage
		var stage = new Konva.Stage({
			container: 'container',   // id of container <div>
			width: 500,
			height: 500
		});

		// then create layer
		var layer = new Konva.Layer();

		// 绘制一个矩形，用作展示油门开合度，高度为0到100之间
		var accelBox = new Konva.Rect({
			x: 80,
			y: 0,
			width: 20,
			height: 100,
			stroke: 'black',
			strokeWidth: 2
		});
		var accel = new Konva.Rect({
			x: 80,
			y: 0,
			width: 20,
			height: 0,
			fill: 'green'
		});
		var accelText = new Konva.Text({
			x: 80,
			y: 110,
			text: 'Accel',
			fontSize: 16,
			fill: 'black'
		});
		// add the rectangle to the layer
		layer.add(accelBox);
		layer.add(accel);
		layer.add(accelText);

		// 绘制一个矩形，用作展示刹车开合度，高度为0到100之间
		var brakeBox = new Konva.Rect({
			x: 30,
			y: 0,
			width: 20,
			height: 100,
			stroke: 'black',
			strokeWidth: 2
		});
		var brakeer = new Konva.Rect({
			x: 30,
			y: 0,
			width: 20,
			height: 0,
			fill: 'red'
		});
		var brakeText = new Konva.Text({
			x: 30,
			y: 110,
			text: 'Break',
			fontSize: 16,
			fill: 'black'
		});
		// add the rectangle to the layer
		layer.add(brakeBox);
		layer.add(brakeer);
		layer.add(brakeText);

		//当前档位
		var gear = new Konva.Text({
			x: 120,
			y: 0,
			text: 'N',
			fontSize: 48,
			fill: 'black'
		});
		// add the rectangle to the layer
		layer.add(gear);

		//方向盘
		var steerBox = new Konva.Rect({
			x: 0,
			y: 150,
			width: 200,
			height: 20,
			stroke: 'black',
			strokeWidth: 2
		});
		var steer = new Konva.Rect({
			x: 100,
			y: 150,
			width: 0,
			height: 20,
			fill: 'green'
		});
		var steerText = new Konva.Text({
			x: 0,
			y: 180,
			text: '0%',
			fontSize: 16,
			fill: 'black'
		});
		// add the rectangle to the layer
		layer.add(steerBox);
		layer.add(steer);
		layer.add(steerText);


		// add the layer to the stage
		stage.add(layer);

		ws.onmessage = function(event) {
		    const data = JSON.parse(event.data);
			//油门
			const accelHeight = data.Accel / 255 * 100;
			accel.setHeight(accelHeight);
			accel.setY(100 - accelHeight);
			accelText.setText(Math.round(data.Accel/255*100)+ '%');
			//刹车
			const brakeHeight = data.Brake / 255 * 100;
			brakeer.setHeight(brakeHeight);
			brakeer.setY(100 - brakeHeight);
			brakeText.setText(Math.round(data.Brake/255*100) + '%');
			//档位
			gear.setText(data.Gear == 11 ? 'N' : (data.Gear || 'R' ));
			//方向盘
			const steerWidth = data.Steer / 127 * 100;
			steer.setWidth(Math.abs(steerWidth));
			//右侧
			if( data.Steer > 0 ){
				steer.setX(100);
			}
			//左侧
			else if( data.Steer < 0 ){
				steer.setX( 100 - Math.abs(steerWidth) );
			}
			
			steerText.setText(Math.round(data.Steer/127*100) + '%');
			//刷新画面
			layer.draw();
		};
	</script>
</body>

</html>